<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <LINK href="style.css" rel="stylesheet" type="text/css">
   <title>Mariachi Casa Payment Screen</title>
   <style>
      body {
         background-image:url('chips-and-salsa.jpg');
		 background-repeat:no-repeat;
      }
   </style>
</head>


<!-- Javascript to handle the buttons -->
<script>
function claimTicket(){
	alert("Sorry, this option is not yet available.");
}

function tipCalculator(){
	alert("Sorry, this option is not yet available.");
}

function useCoupon(){
	var coupon = prompt("Input Coupon Code:", "Coupon Code");
	//test for valid coupon code
	//if valid, edit ticket as needed
}

function paymentOptions(){
	window.open('merryMariachi.html','Window1','menubar=no, width=430, height=360, toobar=no');
}
</script>

<body>
   <div id="backButton">
      <button class="backButton" onclick="">Back</button>
   </div>
   
   <div id="leftSidePayment">
      <table width="100%"  border="0" cellspacing="2" cellpadding="2" style="border-bottom: 1pt solid black">
         <tr style="font: 24pt Georgia; font-weight: bold; color: #333333">
            <td>Tablet</td>
			<td>Item</td>
			<td>Price</td>
         </tr>
		 
		 <!-- This will need to be dynamic! Get from da-->
		 <tr>
            <td>Tablet</td>
			<td>Item</td>
			<td>Price</td>
         </tr>
		 
		 <tr>
            <td>Tablet</td>
			<td>Item</td>
			<td>Price</td>
         </tr>
      </table>
	  
	  <table width="100%"  border="0" cellspacing="2" cellpadding="2" style="border-bottom: 1pt solid black">
         <tr>
            <td style="font: 18pt Georgia; font-weight: bold; color: #333333">Subtotal:</td>
			<td>$    </td>
         </tr>

		 <tr>
            <td style="font: 18pt Georgia; font-weight: bold; color: #333333">Tax</td>
			<td>$    </td>
         </tr>
		 
		 <tr>
            <td style="font: 18pt Georgia; font-weight: bold; color: #333333">Tip</td>
			<td>$    </td>
         </tr>
      </table>
	  
	  <table width="100%"  border="0" cellspacing="2" cellpadding="2">
         <tr>
            <td style="font: 18pt Georgia; font-weight: bold; color: #333333">Total:</td>
			<td>$    </td>
         </tr>
      </table>
   </div>

   <div id="rightSidePayment">
      You are currently using Tablet 1.
      <br/><br/>
      <button class="menuButton" onclick="claimTicket()">Claim A Ticket</button>
	  <br/><br/>
	  <button class="menuButton" onclick="paymentOptions()">Pay Now</button>
	  <br/><br/>
	  <button class="menuButton" onclick="useCoupon()">Coupons</button>
	  <br/><br/>
	  <button class="menuButton" onclick="tipCalculator()">Add Tip</button>
   </div>

   <div id="pageBottom">
      <button class="footerButton" onclick="">Help</button>
	  <button class="footerButton" onclick="">Refill</button>
   </div>
</body>
</html>
